<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>登陆</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html {
            height: 100%;
        }

        * {
            padding: 0;
            margin: 0;
        }

        input {
            border: 0; // 去除未选中状态边框
            outline: none!important; // 去除选中状态边框
            background-color: rgba(0, 0, 0, 0); // 透明背景
        }

        header {
            height: 0rem;
            /*background-color: #333;*/
        }

        body {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
        }

        .logo {
            height: 40%;
            background-image: url('../image/login-img.png');
            background-size: 30%;
            background-position: center;
            background-repeat: no-repeat;
        }

        .form {
            height: 60%;
        }

        .field {
            height: 70%;
            width: 80%;
            margin: auto;
            font-size: 1.5rem;
            color: #ccc;
        }

        #login {
            height: 15%;
            width: 80%;
            background: blue;
            border-radius: 1rem;
            background: #3fd5a5;
            margin: auto;
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-bottom: 10%;
        }

        #account {
            outline: none;
            height: 20%;
            width: 80%;
            margin: 6% auto;
            vertical-align: middle;
            border-bottom: 1px solid #ccc;
            padding-left: 10%;
            background-image: url('../icon/user-single.png');
            background-size: 6%;
            background-position: 0% 38%;
            background-repeat: no-repeat;
        }

        #password {
            outline: none;
            height: 20%;
            width: 80%;
            vertical-align: middle;
            margin: auto;
            margin-bottom: 5%;
            border-bottom: 1px solid #ccc;
            padding-left: 10%;
            background-image: url('../icon/user-passwordlock.png');
            background-size: 6%;
            background-position: 0% 38%;
            background-repeat: no-repeat;
        }

        .field>span {
            height: 15%;
            width: 40%;
            display: flex;
            justify-content: left;
            align-items: center;
        }

        #remember_me {
            height: 100%;
            width: 20%;
            margin-right: 3%;
        }

        .touch-down {
            opacity: .4;
        }
    </style>
</head>

<body class="container">
    <header></header>
    <section class="logo"></section>
    <section class="form">
        <section class="field">
            <input type="text" id="account" placeholder="请输入用户名" />
            <input type="password" id="password" placeholder="请输入密码" />
            <span><input type="checkbox" id="remember_me"/>记住我</span>
        </section>
        <section tapmode="touch-down" id="login">
            登陆
        </section>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript" src="../script/keyback.js"></script>
<script type="text/javascript">
    function initFront() {
        var header = $api.dom('header'); // 获取 header 标签元素
        var headerHeight = $api.fixStatusBar(header);

        var height = api.winHeight - headerHeight;
        var body = $api.dom('body');
        $api.css(body, 'height:' + height + 'px');
          var check=$api.byId('remember_me')
        if (localStorage.getItem('account')){
          //存在將本地localStorage值显示在输入框中  
          document.getElementById("account").value=localStorage.getItem('account');
          document.getElementById("password").value=localStorage.getItem('password');
          check.checked = true;// 设置复选框为选中状态    
         }

        var login = $api.byId('login');
        $api.addEvt(login, 'touchend', function() {
          var account = $api.byId('account');
          var password = $api.byId('password');
          var check=$api.byId('remember_me')
          var ischeck=check.checked
          account = $api.val(account);
          password = $api.val(password);
         
            if (account == "" || password == "") {
                api.toast({
                    msg: '请输入账号和密码',
                    duration: 2000,
                    location: 'bottom'
                });
            } else {
                var request = new Request('user_sign_in');
                request.login(account, password, function(result, error) {
                  localStorage.setItem('account',account);
                  localStorage.setItem('password',password);
                  if(check.checked==false){
                    localStorage.removeItem('account');
                    localStorage.removeItem('password');
                  }
                    if (result) {
                        api.closeWin({
                            animation: {
                                type: "none",
                                duration: 0
                            }
                        });
                    } else {
                        api.toast({
                            msg: '账号不存在',
                            duration: 2000,
                            location: 'bottom'
                        });

                    }
                });

            }

        });
    }

    function initEvent() {
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {});

        keybackTwiceExit();
    }

    apiready = function() {
        console.log('login-win');
        initFront();
        initEvent();
    };
</script>

</html>
